<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>从 Hello Git 到开源同行</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2eaadc',
            secondary: '#17151f',
            accent: '#f97316',
            neutral: '#f3f4f6',
            dark: '#1e293b'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            mono: ['Fira Code', 'monospace']
          }
        }
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-transform-opacity {
        transition-property: transform, opacity;
      }
      .git-command {
        @apply bg-dark text-green-400 p-4 rounded-lg font-mono text-sm md:text-base overflow-x-auto my-4;
      }
      .section-fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      }
      .section-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
  
  <!-- 其他样式 -->
  <style>
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 终端光标动画 */
    .terminal-cursor {
      animation: blink 1s step-end infinite;
    }
    
    @keyframes blink {
      from, to { opacity: 1; }
      50% { opacity: 0; }
    }
    
    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #2eaadc;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #1d8cb8;
    }
    
    /* 粒子背景容器 */
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
    }
  </style>
</head>

<body class="bg-white text-gray-800 font-sans">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-md shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-github text-2xl text-primary"></i>
        <span class="font-bold text-xl">Git Journey</span>
      </div>
      
      <!-- 桌面导航 -->
      <nav class="hidden md:flex space-x-8">
        <a href="#intro" class="hover:text-primary transition-colors">入门</a>
        <a href="#commands" class="hover:text-primary transition-colors">命令</a>
        <a href="#workflow" class="hover:text-primary transition-colors">流程</a>
        <a href="#opensource" class="hover:text-primary transition-colors">开源</a>
        <a href="#community" class="hover:text-primary transition-colors">社区</a>
      </nav>
      
      <!-- 移动端菜单按钮 -->
      <button id="menu-toggle" class="md:hidden text-gray-700 focus:outline-none">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
      <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
        <a href="#intro" class="py-2 hover:text-primary transition-colors">入门</a>
        <a href="#commands" class="py-2 hover:text-primary transition-colors">命令</a>
        <a href="#workflow" class="py-2 hover:text-primary transition-colors">流程</a>
        <a href="#opensource" class="py-2 hover:text-primary transition-colors">开源</a>
        <a href="#community" class="py-2 hover:text-primary transition-colors">社区</a>
      </div>
    </div>
  </header>

  <!-- 英雄区域 -->
  <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-secondary to-dark text-white overflow-hidden">
    <!-- 粒子背景 -->
    <div id="particles-js"></div>
    
    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-3xl mx-auto text-center">
        <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold leading-tight mb-6 text-shadow">
          从 <span class="text-primary">Hello Git</span> 到 <span class="text-accent">开源同行</span>
        </h1>
        <p class="text-xl md:text-2xl text-gray-300 mb-8">
          探索版本控制的世界，踏上协作开发的旅程
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <a href="#commands" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all shadow-lg hover:shadow-primary/30 hover:-translate-y-1">
            开始学习 <i class="fa fa-arrow-right ml-2"></i>
          </a>
          <a href="#workflow" class="bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white font-medium py-3 px-8 rounded-lg transition-all border border-white/30 hover:-translate-y-1">
            查看工作流
          </a>
        </div>
      </div>
    </div>
    
    <!-- 波浪分隔符 -->
    <div class="absolute bottom-0 left-0 w-full">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" class="w-full h-auto fill-white">
        <path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"></path>
      </svg>
    </div>
  </section>

  <!-- 简介部分 -->
  <section id="intro" class="py-16 md:py-24 section-fade-in">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center mb-16">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">什么是 Git？</h2>
        <p class="text-lg text-gray-600">
          Git 是一个分布式版本控制系统，它可以跟踪文件的变化，让你能够回溯到之前的版本，
          并与他人协同工作而不会互相干扰。
        </p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-neutral rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
            <i class="fa fa-history text-2xl text-primary"></i>
          </div>
          <h3 class="text-xl font-semibold mb-3">版本控制</h3>
          <p class="text-gray-600">
            记录文件的每一次修改，随时回溯到任何历史版本，再也不用担心意外删除或修改。
          </p>
        </div>
        
        <div class="bg-neutral rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
            <i class="fa fa-users text-2xl text-primary"></i>
          </div>
          <h3 class="text-xl font-semibold mb-3">团队协作</h3>
          <p class="text-gray-600">
            多人同时开发同一个项目，Git 会智能合并代码，解决冲突，提高团队效率。
          </p>
        </div>
        
        <div class="bg-neutral rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
          <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
            <i class="fa fa-code-fork text-2xl text-primary"></i>
          </div>
          <h3 class="text-xl font-semibold mb-3">分支管理</h3>
          <p class="text-gray-600">
            创建独立的开发分支，在不影响主代码的情况下进行功能开发和实验。
          </p>
        </div>
      </div>
      
      <!-- 交互式终端演示 -->
      <div class="mt-16 max-w-3xl mx-auto">
        <h3 class="text-xl font-semibold mb-6 text-center">第一个 Git 命令</h3>
        <div class="bg-dark rounded-xl overflow-hidden shadow-lg">
          <div class="bg-gray-800 px-4 py-2 flex items-center space-x-2">
            <div class="w-3 h-3 rounded-full bg-red-500"></div>
            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
            <div class="w-3 h-3 rounded-full bg-green-500"></div>
            <span class="text-gray-400 text-sm ml-2">终端</span>
          </div>
          <div class="p-4 font-mono text-sm text-gray-300">
            <p><span class="text-blue-400">user@machine</span>:<span class="text-purple-400">~</span>$ git --version</p>
            <p class="text-green-400 mt-1">git version 2.34.1</p>
            
            <p class="mt-4"><span class="text-blue-400">user@machine</span>:<span class="text-purple-400">~</span>$ mkdir my-first-repo</p>
            <p class="mt-4"><span class="text-blue-400">user@machine</span>:<span class="text-purple-400">~</span>$ cd my-first-repo</p>
            <p class="mt-4"><span class="text-blue-400">user@machine</span>:<span class="text-purple-400">~/my-first-repo</span>$ git init</p>
            <p class="text-green-400 mt-1">Initialized empty Git repository in /home/user/my-first-repo/.git/</p>
            
            <p class="mt-4"><span class="text-blue-400">user@machine</span>:<span class="text-purple-400">~/my-first-repo</span>$ <span id="terminal-text">echo "Hello Git" > README.md</span><span class="terminal-cursor">|</span></p>
          </div>
        </div>
        <p class="text-center text-gray-500 text-sm mt-4">尝试点击终端中的命令，查看效果</p>
      </div>
    </div>
  </section>

  <!-- Git 命令部分 -->
  <section id="commands" class="py-16 md:py-24 bg-neutral section-fade-in">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center mb-16">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">常用 Git 命令</h2>
        <p class="text-lg text-gray-600">
          掌握这些核心命令，开启你的 Git 之旅。点击命令可查看详细说明和示例。
        </p>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 命令卡片 -->
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="init">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git init</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">初始化</span>
          </div>
          <p class="text-gray-600 text-sm">在当前目录初始化一个新的 Git 仓库</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="clone">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git clone</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">获取</span>
          </div>
          <p class="text-gray-600 text-sm">克隆远程仓库到本地</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="add">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git add</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">暂存</span>
          </div>
          <p class="text-gray-600 text-sm">将文件添加到暂存区</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="commit">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git commit</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">提交</span>
          </div>
          <p class="text-gray-600 text-sm">将暂存区的文件提交到本地仓库</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="push">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git push</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">同步</span>
          </div>
          <p class="text-gray-600 text-sm">将本地仓库的提交推送到远程仓库</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="pull">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git pull</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">同步</span>
          </div>
          <p class="text-gray-600 text-sm">拉取远程仓库的更新到本地</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="branch">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git branch</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">分支</span>
          </div>
          <p class="text-gray-600 text-sm">列出、创建或删除分支</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="checkout">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git checkout</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">切换</span>
          </div>
          <p class="text-gray-600 text-sm">切换分支或恢复工作区文件</p>
        </div>
        
        <div class="git-command-card bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all hover:-translate-y-1 cursor-pointer" data-command="merge">
          <div class="flex justify-between items-start mb-4">
            <h3 class="font-semibold text-lg">git merge</h3>
            <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded">合并</span>
          </div>
          <p class="text-gray-600 text-sm">将一个分支的更改合并到当前分支</p>
        </div>
      </div>
      
      <!-- 命令详情展示区 -->
      <div id="command-detail" class="mt-12 max-w-3xl mx-auto bg-white rounded-xl shadow-md p-6 md:p-8">
        <h3 class="text-xl font-bold mb-4" id="detail-title">选择一个命令查看详情</h3>
        <p class="text-gray-600 mb-6" id="detail-description">点击上方的命令卡片，查看详细说明和使用示例。</p>
        
        <div id="detail-example" class="hidden">
          <h4 class="font-semibold text-lg mb-3">示例：</h4>
          <div class="git-command" id="detail-code">
            <!-- 命令示例将在这里动态显示 -->
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 工作流程部分 -->
  <section id="workflow" class="py-16 md:py-24 section-fade-in">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center mb-16">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">Git 工作流程</h2>
        <p class="text-lg text-gray-600">
          了解标准的 Git 工作流程，让你的开发过程更加规范高效。
        </p>
      </div>
      
      <div class="relative">
        <!-- 流程时间线 -->
        <div class="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary/20"></div>
        
        <!-- 流程步骤 -->
        <div class="space-y-12 relative">
          <!-- 步骤 1 -->
          <div class="md:flex items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
              <h3 class="text-xl font-semibold mb-2">克隆或创建仓库</h3>
              <p class="text-gray-600">
                从远程仓库克隆项目到本地，或者在本地创建新仓库并关联远程仓库。
              </p>
            </div>
            
            <div class="md:absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10">1</div>
            
            <div class="md:w-1/2 md:pl-12">
              <div class="git-command">
                # 克隆远程仓库<br>
                git clone https://github.com/username/repo.git<br><br>
                # 或创建新仓库并关联远程<br>
                git init<br>
                git remote add origin https://github.com/username/repo.git
              </div>
            </div>
          </div>
          
          <!-- 步骤 2 -->
          <div class="md:flex items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0 md:order-1 order-2">
              <div class="git-command">
                # 创建并切换到新分支<br>
                git checkout -b feature/new-feature<br><br>
                # 或使用新命令<br>
                git switch -c feature/new-feature
              </div>
            </div>
            
            <div class="md:absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10">2</div>
            
            <div class="md:w-1/2 md:pl-12 md:order-2 order-1">
              <h3 class="text-xl font-semibold mb-2">创建分支</h3>
              <p class="text-gray-600">
                为新功能或修复创建独立的分支，保持主分支的稳定。
              </p>
            </div>
          </div>
          
          <!-- 步骤 3 -->
          <div class="md:flex items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
              <h3 class="text-xl font-semibold mb-2">开发与提交</h3>
              <p class="text-gray-600">
                在分支上进行开发，定期提交更改，编写有意义的提交信息。
              </p>
            </div>
            
            <div class="md:absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10">3</div>
            
            <div class="md:w-1/2 md:pl-12">
              <div class="git-command">
                # 添加更改到暂存区<br>
                git add .<br><br>
                # 提交更改<br>
                git commit -m "feat: 添加用户登录功能"<br><br>
                # 查看状态<br>
                git status
              </div>
            </div>
          </div>
          
          <!-- 步骤 4 -->
          <div class="md:flex items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0 md:order-1 order-2">
              <div class="git-command">
                # 推送到远程分支<br>
                git push -u origin feature/new-feature<br><br>
                # 拉取远程更新<br>
                git pull origin main
              </div>
            </div>
            
            <div class="md:absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10">4</div>
            
            <div class="md:w-1/2 md:pl-12 md:order-2 order-1">
              <h3 class="text-xl font-semibold mb-2">同步远程</h3>
              <p class="text-gray-600">
                将本地分支推送到远程仓库，保持与团队成员的代码同步。
              </p>
            </div>
          </div>
          
          <!-- 步骤 5 -->
          <div class="md:flex items-center">
            <div class="md:w-1/2 md:pr-12 md:text-right mb-6 md:mb-0">
              <h3 class="text-xl font-semibold mb-2">创建 Pull Request</h3>
              <p class="text-gray-600">
                在 GitHub/GitLab 上创建 PR/MR，邀请团队成员进行代码审查。
              </p>
            </div>
            
            <div class="md:absolute left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold z-10">5</div>
            
            <div class="md:w-1/2 md:pl-12">
              <div class="git-command">
                # 代码审查后，合并到主分支<br>
                # 切换到主分支<br>
                git checkout main<br><br>
                # 合并功能分支<br>
                git merge feature/new-feature<br><br>
                # 推送到远程主分支<br>
                git push origin main
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 开源部分 -->
  <section id="opensource" class="py-16 md:py-24 bg-neutral section-fade-in">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center mb-16">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">开源的力量</h2>
        <p class="text-lg text-gray-600">
          Git 不仅是版本控制工具，更是开源协作的基石。加入开源社区，与全球开发者共同创造。
        </p>
      </div>
      
      <div class="grid md:grid-cols-2 gap-12 items-center mb-16">
        <div>
          <h3 class="text-2xl font-semibold mb-4">什么是开源？</h3>
          <p class="text-gray-600 mb-4">
            开源软件是指源代码可以被公众访问的软件，任何人都可以查看、修改和分发该软件。
            开源不仅是一种开发模式，更是一种协作文化和社区精神。
          </p>
          <p class="text-gray-600 mb-6">
            通过 Git 和 GitHub 等平台，全球开发者可以共同参与项目开发，解决问题，推动技术进步。
          </p>
          
          <div class="space-y-3">
            <div class="flex items-start">
              <div class="mt-1 mr-3 text-primary"><i class="fa fa-check-circle"></i></div>
              <div>
                <h4 class="font-medium">自由使用</h4>
                <p class="text-gray-600 text-sm">任何人都可以自由使用开源软件，无需支付许可费用</p>
              </div>
            </div>
            
            <div class="flex items-start">
              <div class="mt-1 mr-3 text-primary"><i class="fa fa-check-circle"></i></div>
              <div>
                <h4 class="font-medium">协作改进</h4>
                <p class="text-gray-600 text-sm">全球开发者可以共同改进软件，修复漏洞</p>
              </div>
            </div>
            
            <div class="flex items-start">
              <div class="mt-1 mr-3 text-primary"><i class="fa fa-check-circle"></i></div>
              <div>
                <h4 class="font-medium">知识共享</h4>
                <p class="text-gray-600 text-sm">开源项目是学习编程和软件开发的宝贵资源</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="relative h-80 md:h-96">
          <canvas id="opensource-chart" class="w-full h-full"></canvas>
        </div>
      </div>
      
      <!-- 如何参与开源 -->
      <div class="bg-white rounded-xl shadow-md p-8">
        <h3 class="text-2xl font-semibold mb-8 text-center">如何开始参与开源？</h3>
        
        <div class="grid md:grid-cols-4 gap-6">
          <div class="text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-search text-2xl text-primary"></i>
            </div>
            <h4 class="font-medium mb-2">发现项目</h4>
            <p class="text-gray-600 text-sm">
              在 GitHub 上寻找感兴趣的项目，查看 "good first issue"
            </p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-code text-2xl text-primary"></i>
            </div>
            <h4 class="font-medium mb-2">学习代码</h4>
            <p class="text-gray-600 text-sm">
              理解项目结构和代码风格，遵循贡献指南
            </p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-pencil text-2xl text-primary"></i>
            </div>
            <h4 class="font-medium mb-2">提交贡献</h4>
            <p class="text-gray-600 text-sm">
              修复 bug 或添加功能，提交 Pull Request
            </p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-comments text-2xl text-primary"></i>
            </div>
            <h4 class="font-medium mb-2">参与讨论</h4>
            <p class="text-gray-600 text-sm">
              参与 issue 讨论，回答问题，帮助改进文档
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 社区部分 -->
  <section id="community" class="py-16 md:py-24 section-fade-in">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center mb-16">
        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">加入开源社区</h2>
        <p class="text-lg text-gray-600">
          连接全球开发者，分享知识，共同成长。以下是一些活跃的开源社区和平台。
        </p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8">
        <!-- GitHub -->
        <a href="https://github.com" target="_blank" class="group bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-all">
          <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
            <i class="fa fa-github text-7xl text-gray-800 group-hover:text-primary transition-colors"></i>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">GitHub</h3>
            <p class="text-gray-600">
              全球最大的代码托管平台和开源社区，拥有数千万开发者和项目。
            </p>
          </div>
        </a>
        
        <!-- GitLab -->
        <a href="https://gitlab.com" target="_blank" class="group bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-all">
          <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
            <i class="fa fa-gitlab text-7xl text-gray-800 group-hover:text-[#fca326] transition-colors"></i>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">GitLab</h3>
            <p class="text-gray-600">
              开源的 DevOps 平台，提供代码托管、CI/CD 等完整的开发工具链。
            </p>
          </div>
        </a>
        
        <!-- Stack Overflow -->
        <a href="https://stackoverflow.com" target="_blank" class="group bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-all">
          <div class="h-48 bg-gray-100 flex items-center justify-center p-6">
            <i class="fa fa-stack-overflow text-7xl text-gray-800 group-hover:text-[#f48024] transition-colors"></i>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-semibold mb-2">Stack Overflow</h3>
            <p class="text-gray-600">
              开发者问答社区，解决技术难题，分享编程知识和经验。
            </p>
          </div>
        </a>
      </div>
      
      <!-- 开源项目推荐 -->
      <div class="mt-16">
        <h3 class="text-2xl font-semibold mb-8 text-center">适合新手的开源项目</h3>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all">
            <div class="flex items-center mb-4">
              <img src="https://picsum.photos/seed/react/40/40" alt="React" class="w-10 h-10 rounded-full mr-3">
              <h4 class="font-semibold">React</h4>
            </div>
            <p class="text-gray-600 text-sm mb-4">
              用于构建用户界面的 JavaScript 库，有完善的新手贡献指南。
            </p>
            <a href="https://github.com/facebook/react" target="_blank" class="text-primary text-sm flex items-center">
              查看项目 <i class="fa fa-external-link ml-1"></i>
            </a>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all">
            <div class="flex items-center mb-4">
              <img src="https://picsum.photos/seed/vue/40/40" alt="Vue.js" class="w-10 h-10 rounded-full mr-3">
              <h4 class="font-semibold">Vue.js</h4>
            </div>
            <p class="text-gray-600 text-sm mb-4">
              渐进式 JavaScript 框架，社区友好，适合新手贡献文档和代码。
            </p>
            <a href="https://github.com/vuejs/vue" target="_blank" class="text-primary text-sm flex items-center">
              查看项目 <i class="fa fa-external-link ml-1"></i>
            </a>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-all">
            <div class="flex items-center mb-4">
              <img src="https://picsum.photos/seed/flask/40/40" alt="Flask" class="w-10 h-10 rounded-full mr-3">
              <h4 class="font-semibold">Flask</h4>
            </div>
            <p class="text-gray-600 text-sm mb-4">
              Python 的轻量级 Web 框架，代码库较小，适合入门者学习和贡献。
            </p>
            <a href="https://github.com/pallets/flask" target="_blank" class="text-primary text-sm flex items-center">
              查看项目 <i class="fa fa-external-link ml-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 行动召唤 -->
  <section class="py-16 md:py-24 bg-gradient-to-br from-primary/10 to-accent/10 section-fade-in">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">开始你的开源之旅</h2>
      <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-8">
        从第一个 "git init" 开始，逐步探索版本控制的世界，最终成为开源社区的一员。
        每一位开发者的贡献，都让开源世界更加精彩。
      </p>
      <a href="https://github.com/join" target="_blank" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all shadow-lg hover:shadow-primary/30 hover:-translate-y-1">
        注册 GitHub 账号 <i class="fa fa-github ml-2"></i>
      </a>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-secondary text-white py-12">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center mb-8">
        <div class="flex items-center space-x-2 mb-6 md:mb-0">
          <i class="fa fa-github text-2xl text-primary"></i>
          <span class="font-bold text-xl">Git Journey</span>
        </div>
        
        <div class="flex space-x-6">
          <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-github text-xl"></i></a>
          <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-twitter text-xl"></i></a>
          <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-linkedin text-xl"></i></a>
          <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-youtube-play text-xl"></i></a>
        </div>
      </div>
      
      <div class="border-t border-gray-700 pt-8 text-center text-gray-400 text-sm">
        <p>© 2023 Git Journey. 从 Hello Git 到开源同行。</p>
        <p class="mt-2">本网站仅作学习用途，所有商标归各自所有者所有。</p>
      </div>
    </div>
  </footer>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
    <i class="fa fa-arrow-up"></i>
  </button>

  <!-- 粒子背景库 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  
  <!-- 主脚本 -->
  <script>
    // 粒子背景配置
    document.addEventListener('DOMContentLoaded', function() {
      particlesJS('particles-js', {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#2eaadc"
          },
          "shape": {
            "type": "circle"
          },
          "opacity": {
            "value": 0.5,
            "random": true
          },
          "size": {
            "value": 3,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#2eaadc",
            "opacity": 0.2,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 1,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": false
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 140,
              "line_linked": {
                "opacity": 0.5
              }
            },
            "push": {
              "particles_nb": 4
            }
          }
        },
        "retina_detect": true
      });
      
      // 导航栏滚动效果
      const navbar = document.getElementById('navbar');
      window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
          navbar.classList.add('py-2', 'shadow');
          navbar.classList.remove('py-3');
        } else {
          navbar.classList.add('py-3');
          navbar.classList.remove('py-2', 'shadow');
        }
      });
      
      // 移动端菜单切换
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');
      
      menuToggle.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
        const icon = menuToggle.querySelector('i');
        if (icon.classList.contains('fa-bars')) {
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        } else {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });
      
      // 点击移动菜单项后关闭菜单
      const mobileLinks = mobileMenu.querySelectorAll('a');
      mobileLinks.forEach(link => {
        link.addEventListener('click', function() {
          mobileMenu.classList.add('hidden');
          const icon = menuToggle.querySelector('i');
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        });
      });
      
      // 滚动显示元素动画
      const fadeElements = document.querySelectorAll('.section-fade-in');
      
      function checkFade() {
        fadeElements.forEach(element => {
          const elementTop = element.getBoundingClientRect().top;
          const elementVisible = 150;
          
          if (elementTop < window.innerHeight - elementVisible) {
            element.classList.add('section-visible');
          }
        });
      }
      
      window.addEventListener('scroll', checkFade);
      checkFade(); // 初始检查
      
      // 返回顶部按钮
      const backToTopButton = document.getElementById('back-to-top');
      
      window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
          backToTopButton.classList.remove('opacity-0', 'invisible');
          backToTopButton.classList.add('opacity-100', 'visible');
        } else {
          backToTopButton.classList.add('opacity-0', 'invisible');
          backToTopButton.classList.remove('opacity-100', 'visible');
        }
      });
      
      backToTopButton.addEventListener('click', function() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
      
      // 命令详情数据
      const commandDetails = {
        init: {
          title: 'git init',
          description: '在当前目录初始化一个新的 Git 仓库，创建一个隐藏的 .git 目录，用于存储版本控制信息。',
          example: '# 在当前目录初始化仓库\ngit init\n\n# 在指定目录初始化仓库\ngit init my-project'
        },
        clone: {
          title: 'git clone',
          description: '将远程仓库完整地复制到本地，包括所有文件、分支和历史记录。',
          example: '# 克隆远程仓库\ngit clone https://github.com/username/repository.git\n\n# 克隆到指定目录\ngit clone https://github.com/username/repository.git my-folder'
        },
        add: {
          title: 'git add',
          description: '将工作区的文件添加到暂存区，准备提交。暂存区是工作区和本地仓库之间的中间区域。',
          example: '# 添加单个文件\ngit add filename.txt\n\n# 添加所有修改的文件\ngit add .\n\n# 添加特定类型的文件\ngit add *.js'
        },
        commit: {
          title: 'git commit',
          description: '将暂存区的文件提交到本地仓库，创建一个新的版本。每个提交都应该有一个有意义的消息。',
          example: '# 提交并添加消息\ngit commit -m "feat: 添加用户登录功能"\n\n# 提交所有已跟踪的修改（无需git add）\ngit commit -am "fix: 修复登录验证bug"'
        },
        push: {
          title: 'git push',
          description: '将本地仓库的提交推送到远程仓库，与团队共享你的更改。',
          example: '# 推送到默认远程和分支\ngit push\n\n# 推送到指定远程和分支\ngit push origin feature/new-feature\n\n# 首次推送新分支\ngit push -u origin feature/new-feature'
        },
        pull: {
          title: 'git pull',
          description: '从远程仓库拉取最新的更改并合并到当前分支，保持本地代码与远程同步。',
          example: '# 拉取并合并默认远程的当前分支\ngit pull\n\n# 拉取并合并指定远程和分支\ngit pull origin main'
        },
        branch: {
          title: 'git branch',
          description: '用于管理分支，可以列出、创建或删除分支。',
          example: '# 列出所有本地分支\ngit branch\n\n# 列出所有本地和远程分支\ngit branch -a\n\n# 创建新分支\ngit branch feature/new-feature\n\n# 删除分支\ngit branch -d feature/old-feature'
        },
        checkout: {
          title: 'git checkout',
          description: '切换到指定分支，或者恢复工作区的文件。在Git 2.23+中，可使用git switch作为更清晰的替代。',
          example: '# 切换到现有分支\ngit checkout main\n\n# 创建并切换到新分支\ngit checkout -b feature/new-feature\n\n# 恢复文件到最后一次提交的状态\ngit checkout -- filename.txt'
        },
        merge: {
          title: 'git merge',
          description: '将一个分支的更改合并到当前分支。通常用于将功能分支合并回主分支。',
          example: '# 切换到主分支\ngit checkout main\n\n# 将feature分支合并到主分支\ngit merge feature/new-feature\n\n# 中止合并（如果有冲突）\ngit merge --abort'
        }
      };
      
      // 命令卡片点击事件
      const commandCards = document.querySelectorAll('.git-command-card');
      const detailTitle = document.getElementById('detail-title');
      const detailDescription = document.getElementById('detail-description');
      const detailExample = document.getElementById('detail-example');
      const detailCode = document.getElementById('detail-code');
      
      commandCards.forEach(card => {
        card.addEventListener('click', function() {
          const command = this.getAttribute('data-command');
          const details = commandDetails[command];
          
          if (details) {
            detailTitle.textContent = details.title;
            detailDescription.textContent = details.description;
            detailCode.innerHTML = details.example.replace(/\n/g, '<br>');
            
            detailExample.classList.remove('hidden');
            
            // 滚动到详情区域
            document.getElementById('command-detail').scrollIntoView({
              behavior: 'smooth',
              block: 'nearest'
            });
            
            // 高亮当前选中的卡片
            commandCards.forEach(c => c.classList.remove('ring-2', 'ring-primary'));
            this.classList.add('ring-2', 'ring-primary');
          }
        });
      });
      
      // 开源项目增长图表
      const ctx = document.getElementById('opensource-chart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'],
          datasets: [{
            label: 'GitHub 开源项目数（百万）',
            data: [10, 14, 20, 28, 37, 56, 73, 90, 100],
            borderColor: '#2eaadc',
            backgroundColor: 'rgba(46, 170, 220, 0.1)',
            tension: 0.4,
            fill: true
          }, {
            label: '贡献者数（百万）',
            data: [5, 8, 12, 18, 24, 36, 56, 77, 94],
            borderColor: '#f97316',
            backgroundColor: 'rgba(249, 115, 22, 0.1)',
            tension: 0.4,
            fill: true
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: '开源项目与贡献者增长趋势'
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              title: {
                display: true,
                text: '数量（百万）'
              }
            }
          }
        }
      });
      
      // 终端动画效果
      const terminalText = document.getElementById('terminal-text');
      const texts = [
        'echo "Hello Git" > README.md',
        'git add README.md',
        'git commit -m "Initial commit"',
        'git remote add origin https://github.com/your-username/your-repo.git',
        'git push -u origin main'
      ];
      
      let textIndex = 0;
      let charIndex = 0;
      let isDeleting = false;
      
      function typeText() {
        const currentText = texts[textIndex];
        
        if (isDeleting) {
          terminalText.textContent = currentText.substring(0, charIndex - 1);
          charIndex--;
        } else {
          terminalText.textContent = currentText.substring(0, charIndex + 1);
          charIndex++;
        }
        
        // 控制打字速度
        let typeSpeed = isDeleting ? 50 : 150;
        
        // 当完成打字时
        if (!isDeleting && charIndex === currentText.length) {
          isDeleting = true;
          typeSpeed = 1000; // 停留时间
        } else if (isDeleting && charIndex === 0) {
          isDeleting = false;
          textIndex = (textIndex + 1) % texts.length;
          typeSpeed = 500; // 切换文本前的停顿
        }
        
        setTimeout(typeText, typeSpeed);
      }
      
      // 启动打字动画
      setTimeout(typeText, 1000);
    });
  </script>
</body>
</html>